<template>
  <div class="coupons">
    <el-card class="header">
      <el-form ref="search" >
        <el-row>
          <el-col :span="5">
            <el-form-item label-width="120px" label="优惠类型：">
              <el-select placeholder="请选择" v-model="searchfrom.type">
                <el-option
                  v-for="(item, index) in ferentialtype"
                  :key="index"
                  :label="item.value"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="120px" label="优惠名称：">
              <el-input
                style="width: 100%"
                v-model="searchfrom.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="120px" label="创建时间：">
              <el-date-picker
                v-model="time1"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label-width="200px">
              <el-button icon="el-icon-search" type="primary" @click="search"
                >查询</el-button
              >
              <el-button icon="el-icon-delete" @click="clear('search')"
                >重置</el-button
              >
              <el-button icon="el-icon-download" @click="expor">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格区域 -->
    <el-card style="margin-top: 20px">
      <el-row>
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin: 0 0 20px 0"
          @click="adduser"
          >新建</el-button
        >
      </el-row>
      <div class="tabel">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          :header-cell-style="{ background: '#f8f8f8', textAlign: 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column prop="typeStr" label="优惠类型" width="180">
          </el-table-column>
          <el-table-column prop="name" label="优惠名称" width="180">
          </el-table-column>
          <el-table-column prop="way" label="优惠方式"> </el-table-column>
          <el-table-column prop="timeLimitStr" label="有效期" width="180">
          </el-table-column>
          <el-table-column prop="companyName" label="优惠对象" width="180">
            <template slot-scop="row"> </template>
          </el-table-column>
          <el-table-column prop="stateStr" label="状态" width="180">
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" width="180">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scoped">
              <el-button type="text" @click="edit(scoped.row)">编辑</el-button>
              <el-button type="text" @click="delet(scoped.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 弹窗添加 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <div class="detil">
        <el-form :model="addfrom"
        ref="addfrom"
          ><!-- :rules="rules" 去掉了 -->
          <el-form-item label-width="100px" label="优惠类型：" prop="protype">
            <el-select
              placeholder="请选择"
              v-model="addfrom.type"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in ferentialtype"
                :key="index"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="100px" label="优惠卷名称：" prop="proname">
            <el-input v-model="addfrom.name"></el-input>
          </el-form-item>
          <el-form-item label-width="100px" label="优惠卷方式：" prop="prlist">
            <el-input v-model="addfrom.way"></el-input>
          </el-form-item>
          <el-form-item label-width="100px" label="有效期：" prop="prlisttime">
            <el-select
              placeholder="请选择"
              v-model="addfrom.timeLimit"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.laber"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="100px"
            v-if="addfrom.timeLimit == 1"
            prop="prlistdate"
          >
            <el-date-picker
              v-model="time2"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label-width="100px"
            v-if="addfrom.timeLimit == 2"
            prop="prlistdate"
          >
            <label for="">领取后</label>
            <el-input
              style="width: 50%; margin: 0 30px"
              v-model="addfrom.deadlineDay"
            ></el-input>
            <label for="">过期</label>
          </el-form-item>
          <el-form-item label-width="100px" label="优惠对象：" prop="probject">
            <el-select
              placeholder="请选择"
              v-model="addfrom.companyId"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in companyname"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="100px" label="上传图像：">
            <el-upload
              style="border: 1px dashed #d9d9d9; width: 80%"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img
                v-if="addfrom.imageUrl"
                :src="addfrom.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label-width="100px" label="生效时间：" prop="datesstar">
            <el-date-picker
              style="width: 100%"
              v-model="addfrom.effectiveDate"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="100px" label="备注：">
            <el-input type="textarea" v-model="addfrom.remarks"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addlist">确 定</el-button>
        <el-button @click="canse('addfrom')">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  carCoupons,
  getCompanyName,
  Preferentialtype,
  addcarCoupons,
  exporlist,
  deleteCoupons,
  edtCoupons1,
} from "@/api/crcar";
export default {
  data() {
    return {
      title: "",
      //新增表单
      time1: [],
      time2: [], //添加卷
      value1: [],
      companyname: [], //公司优惠对象
      ferentialtype: [], //优惠卷类型
      addfrom: {
        companyId: "0", //商家id
        type: "", // 优惠券类型code
        name: "", // 优惠券名称
        way: "", //优惠方式
        timeLimit: "", //有效期标识 1按时段 2按领取
        dateStart: "", // 有效开始时间 timeLimit为 1 必传
        dateEnd: "", // 有效结束时间 timeLimit为 1 必传
        deadlineDay: "", // 	有效天数 timeLimit为 2 必传
        imageUrl: "http://dummyimage.com/400x400", // 图片路径 多个;隔开
        effectiveDate: "", //	生效时间
        remarks: "", //备注
      },
      searchfrom: {
        type: "",
        current: 1,
        size: 10,
        name: "",
        companyId: "",
        createDateStart: "",
        createDateEnd: "",
      },
      centerDialogVisible: false, // 新增弹窗
      list: {
        current: 1,
        size: 10,
      },
      tableData: [], //优惠卷数据
      options: [
        {
          laber: "按时段",
          value: "1",
        },
        {
          laber: "按时间",
          value: "2",
        },
      ],
      /* 表单验证 */
      rules: {
        protype: [
          { required: true, message: "请选择优惠类型", trigger: "blur" },
        ],
        proname: [
          { required: true, message: "请选择优惠卷名称", trigger: "blur" },
        ],
        prlist: [
          { required: true, message: "请选择优惠卷方式", trigger: "blur" },
        ],
        prlisttime: [
          { required: true, message: "请选择有效期", trigger: "blur" },
        ],

        prlistdate: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        probject: [
          { required: true, message: "请选择优惠对象", trigger: "blur" },
        ],
        datesstar: [
          { required: true, message: "请选择生效事件", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  mounted() {
    /* 获取优惠卷 */
    this.getlists();

    /* 获取公司 */
    getCompanyName().then((res) => {
      this.companyname = res.data.data;
      let all = {
        label: "全部商家",
        value: "0",
      };
      this.companyname.unshift(all);
      console.log(this.companyname, "获取公司");
    });
    /* 优惠类型 */
    Preferentialtype("coupon_type").then((res) => {
      console.log(res, "优惠类型");
      this.ferentialtype = res.data.data;
      console.log(this.ferentialtype);
    });
  },
  methods: {
    getlists() {
      carCoupons(this.list).then((res) => {
        console.log(res, "优惠卷成功");
        if (res.data.code == 0) {
          this.tableData = res.data.data.records;
        }
      });
    },
    search() {
      this.searchfrom.createDateStart = this.time1[0];
      this.searchfrom.createDateEnd = this.time1[1];
      carCoupons(this.searchfrom).then((res) => {
        if (res.data.code == 0) {
          this.$message.success("查询成功");
          this.tableData = res.data.data.records;
        }
      });
    },
    clear(inputfrom) {
      /* 增加优化重置按钮 */
      /* ---------------------------------------------------- */
      this.time1=[],
      this.time2=[]
      this.searchfrom={
       
        type: "",
        current: 1,
        size: 10,
        name: "",
        companyId: "",
        createDateStart: "",
        createDateEnd: "",
      
      }
      this.getlists();
    },
    canse(addfrom) {
      //this.clear();
      //this.addfrom = "";
     this.addfrom={
       companyId: "0", 
        type: "", 
        name: "", 
        way: "", 
        timeLimit: "", 
        dateStart: "", 
        dateEnd: "", 
        deadlineDay: "", 
        imageUrl: "http://dummyimage.com/400x400", 
        effectiveDate: "", 
        remarks: "", 
     }
      this.time1 = "";
      this.time2 = "";
      this.centerDialogVisible = false;
    },
    addlist() {
      // this.clear();
      // this.addfrom = "";
      // this.time1 = "";
      // this.time2 = "";
      this.centerDialogVisible = false;
      this.addfrom.dateStart = this.time2[0];
      this.addfrom.dateEnd = this.time2[1];
      console.log(this.addfrom.dateStart, this.addfrom.dateEnd);
      if (this.title == "新增优惠卷") {
        addcarCoupons(this.addfrom).then((res) => {
          if (res.data.code == 0) {
            this.$message.success("新增成功");
            this.centerDialogVisible = false;
            //this.addfrom = "";
            this.canse()
            this.getlists();
          }
        });
      } else {
        edtCoupons1(this.addfrom).then((res) => {
          console.log(res, "编辑");
          if (res.data.code == 0) {
            this.$message.success("修改成功");
            this.centerDialogVisible = false;
            //this.addfrom = "";
            this.canse()
            this.getlists();
          }
        });
      }
    },
    /* 导出exporlist */
    expor() {
      exporlist(this.searchfrom).then((res) => {
        console.log(res);
        let blob = res.data;
        const fileReader = new FileReader();
        fileReader.readAsDataURL(blob);
        fileReader.onload = (event) => {
          let a = document.createElement("a");
          let _fileName = `优惠卷.xls`;
          a.download = _fileName;
          a.href = event.target.result;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        };
      });
    },
    delet(row) {
      let ids = row.id; // 优惠卷id  ？ companyId商家id

      deleteCoupons(ids).then((res) => {
        console.log(res);
        this.getlists();
      });
    },
    edit(row) {
      this.addfrom = row;
      this.title = "编辑优惠卷";
      this.centerDialogVisible = true;
    },
    adduser() {
      // this.addfrom = '';
      this.title = "新增优惠卷";
      this.centerDialogVisible = true;
    },
  },
};
</script>
<style lang='scss' scoped>
.detil {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
